<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选座页面</title>
    <style>
        .bt li {
            list-style: none;
            line-height: 28px;
        }
        
        li {
            list-style: none;
        }
        
        .xyb {
            margin-left: 55%;
        }
        
        .seat label {
            margin-right: 5px;
            text-align: center;
            display: inline-block;
        }
        
        .seat span {
            display: inline-block;
            width: 54px;
            height: 25px;
            /* background: chartreuse; */
        }
        
        .status {
            position: absolute;
            top: 66px;
            left: 4%;
        }
        
        .seat_list span {
            border: 1px solid #000;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <ul class="bt">
        <li>
            <label for=""><b>选座说明：</b></label>
            <label for=""><img src="__STATIC__/img/seat_0.png" alt="" id="seat_0"></label>
            <label for="">可选座位</label>
            <label for=""><img src="__STATIC__/img/seat_1.png" alt=""></label>
            <label for="">已售座位</label>
            <label for=""><img src="__STATIC__/img/seat_2.png" alt="" id="seat_2"></label>
            <label for="">已选座位</label>
        </li>
    </ul>
    <br>
    <div class="status">
        <label for=""><b>已选座位:</b></label>
        <label for="" class="seat_list"></label>
    </div>
    <div class="seat">
        <ul>

            {volist name='seat' id="vr" key="k"}
            <li>
                <span>第{$k}排</span> {volist name="vr" id="vc"} {if condition="$vc['user_id']==0"}
                <label class="active" id="s_{$vc['ticket_id']}_{$vc['row']}_{$vc['col']}_{$vc['user_id']}">
                        <img src="__STATIC__/img/seat_0.png" alt="{$vc['col']}">
                    </label> {else/}
                <label id="s_{$vc['ticket_id']}_{$vc['row']}_{$vc['col']}_{$vc['user_id']}">
                        <img src="__STATIC__/img/seat_1.png" alt="{$vc['col']}">
                    </label> {/if} {/volist}
            </li>
            {/volist}
        </ul>
    </div>
    <button id="submit_btn">下一步</button>
    <script src="__STATIC__/js/jquery-3.4.1.js"></script>
    <script>
        $(function() {
            //当前电影的排期
            var layout_id = "{$layout_id}";
            //选中的电影票
            var seat = [];
            $('.active').on("click", function() {
                var id = $(this).prop('id'); //你点击了那个label元素，id就是那个label元素的属性
                var seat_0 = $('#seat_0').prop("src"); //未选中图片地址
                var seat_2 = $('#seat_2').prop("src"); //已选中图片地址
                /**
                 * 思路：在seats数组查找点中的ID，如果没有，表示可以添加到数组；如果已经存在，再点击，表示删除。
                 * 在添加id到seats数组时，需要判断，当前是否已经有6张票了，如果已经6张，不能再选了。
                 * 如果不到6张，则
                 *   1. 将当前id，添加到seats数组中
                 *   2. 修改img的src指向已选图片地址。
                 */
                var index = seat.indexOf(id);
                if (index == -1) {
                    if (seat.length < 6) {
                        seat.push(id);
                        $(this).children("img").prop("src", seat_2)
                    } else {
                        alert('你已经有6张票了');
                    }
                } else {
                    seat.splice(index, 1); //把图片状态改成未选中
                    $(this).children("img").prop("src", seat_0);
                }
                //生成选座结果
                $('.seat_list').html("");
                $.each(seat, function(k, v) {
                    var ids = v.split("_");
                    $('.seat_list').append(`<span>${ids[2]}排${ids[3]}列</span>`);
                });
            });
            //点击下一步，把选中的票提交到后台 
            //为下一步按钮绑定事件
            $('#submit_btn').on("click", function(e) {
                //判断用户是否有选票
                if (seat.length === 0) { //没有选票
                    alert("您还没有选票");
                    return false;
                } else { //已经选票成功了
                    //利用ajxa传输数据
                    $.ajax({
                        type: "POST",
                        url: "{:url('order/seat_do','','')}",
                        data: {
                            layout_id: layout_id,
                            seat: seat
                        },
                        success: function(result) {
                            if (result.code == 1) {
                                alert(result.msg);
                                window.location.href = result.data;
                            } else {
                                alert(result.msg);
                            }
                        }
                    })
                }
            })

        })
    </script>
</body>

</html>